<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../react18/react.development.js"></script>
    <script src="../react18/react-dom.development.js"></script>
    <script src="../react18/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      /*
      什么是JSX:
        * react定义的一种类似于XML的JS扩展语法JS + XML，并拥有 JavaScript 的全部功能
        * JSX本质是React.createElement(component,props, ...children)方法的语法糖
        * JSX语法主要是为了更加方便的书写虚拟DOM,然后浏览器是不识别JSX语法的,所以需要使用babel对JSX的语法进行编译为js,然后浏览器才会识别
        * JSX语法所在的script标签需要添加一个type属性值为"text/babel"
        * 当前文件需要引入babel.js文件,把当前页面中的babel区域进行编译成js,然后浏览器才能执行
      */

      const vDOM = <h1>hello React</h1>;
      console.log(vDOM);

      ReactDOM.createRoot(document.getElementById("app")).render(vDOM);
    </script>
  </body>
</html>
